<template>
  <div>
    <div v-for="(item,index) in list" :key="index">
      <img src="../../../../static/images/headPortrait/headPortrait.jpg" alt="头像" class="head-portrait">
      <div class="head-portrait-right-aside">
        <div class="username">{{item.username}}</div>
        <div class="lastDate">{{item.lastDate}}</div>
      </div>
      <div class="contents">{{item.contents}}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ShareDynamics',
  data () {
    return {
      list: [{
        username: 'Dymone',
        contents: '今天看了一本好书哟',
        lastDate: '2018年7月12日 00:10:32'
      }, {
        username: 'Wayne',
        contents: '今天和Dymone一起看了一本好书哟',
        lastDate: '2018年7月12日 00:08:32'
      }, {
        username: 'Mike233',
        contents: '今天在对着《c++ primer》敲算法',
        lastDate: '2018年7月10日 13:08:32'
      }]
    }
  }
}
</script>

<style scoped>
  .contents{
    margin-left: 16px;
    margin-top: 7px;
  }
  .head-portrait{
    width: 47px;
    height: 47px;
    border: 1px solid rgba(211,211,211,0.7);
    margin-left: 16px;
  }
  .head-portrait-right-aside{
    display: inline-block;
    vertical-align: center;
    margin-top: 32px;
    margin-left: 18px;
  }
  .username{
    font-size: 17px;
  }
  .lastDate{
    font-size: 14px;
    margin-top: 3px;
    color: rgba(119,136,153,1);
  }
</style>
